<template>
    <div class="typeBox">
        <!-- 类型渲染 作业1-->
        <div v-for="(item,index) in typeData" :key="item.id" :class="index==count?'active':''" @click="count=index"> 
            <span>{{ item.name }}</span>
        </div>
    </div>

</template>

<script setup>
import { ref } from 'vue';
 
const count = ref(0)
const typeData = ref([
        {
            "_id": "66383656659a454f4604aed3",
            "name": "喜剧"
        },
        {
            "_id": "66383669659a454f4604aed4",
            "name": "爱情"
        },
        {
            "_id": "6638366f659a454f4604aed5",
            "name": "动作"
        },
        {
            "_id": "66383673659a454f4604aed6",
            "name": "科幻"
        },
        {
            "_id": "6638367b659a454f4604aed7",
            "name": "动画"
        },
        {
            "_id": "66383681659a454f4604aed8",
            "name": "悬疑"
        },
        {
            "_id": "66383689659a454f4604aed9",
            "name": "犯罪"
        },
        {
            "_id": "6638368c659a454f4604aeda",
            "name": "惊悚"
        },
        {
            "_id": "66383692659a454f4604aedb",
            "name": "冒险"
        },
        {
            "_id": "66383696659a454f4604aedc",
            "name": "音乐"
        },
        {
            "_id": "6638369a659a454f4604aedd",
            "name": "历史"
        },
        {
            "_id": "6638369e659a454f4604aede",
            "name": "奇幻"
        },
        {
            "_id": "663836a1659a454f4604aedf",
            "name": "恐怖"
        },
        {
            "_id": "663836a8659a454f4604aee0",
            "name": "战争"
        },
        {
            "_id": "663836b0659a454f4604aee1",
            "name": "传记"
        },
        {
            "_id": "663836b4659a454f4604aee2",
            "name": "歌舞"
        },
        {
            "_id": "663836b9659a454f4604aee3",
            "name": "武侠"
        },
        {
            "_id": "663836c2659a454f4604aee4",
            "name": "灾难"
        },
        {
            "_id": "663836cb659a454f4604aee5",
            "name": "纪录片"
        },
        {
            "_id": "682f32c447bd398e5f05fd14",
            "name": "剧情"
        },
        {
            "_id": "682fe58247bd398e5f05fd20",
            "name": "家庭"
        }
    ])
typeData.value.unshift({"_id":'',"name":"全部"});


</script>

<style scoped>
    .typeBox{
        display: flex;
        flex-wrap: wrap;
        width: 820px;
        margin: 0 auto;
    }
    .typeBox div{
        margin-bottom: 5px;
        text-align: center;
        line-height: 25px;
        padding: 2px 10px;
        border-radius: 16px;
    }
    .active{
        background-color: #f99135;
        color: #fff;
    }
</style>